<template>
	<view class="detail-user" :class="disposition.name">
		<view class="info-wrap" v-if="detail.styleId != 'STYLE_TRADITION' && detail.businessCardStyle != 1">
			<view class="fboxRow Yend ">
				<view class="fboxCol flex1">
					<view class="name fboxRow Ycenter">{{detail.realName}}
						<text v-if="detail.isMemberAuth" class="bwfont bw-a-zu5297"></text>
					</view>
					<view class="job lh38 font26">{{detail.firstCompanyName || detail.industry || '' }}</view>
					<view class="companyName lh38 font26" v-if="detail.firstPositionName">
						{{detail.firstPositionName || ''}}
					</view>
				</view>
				<view class="code fboxCol Ycenter Xcenter" @tap="goPage('qrcode')">
					<!-- #ifdef MP-WEIXIN -->
					<image class="icon-code" :src="WeChatCodeUrl" mode=""></image>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<image class="icon-code"
						src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/index/icon-code2.png" mode="">
					</image>
					<!-- #endif -->
					<view class="tit mt8 lh38 color-ACB4C7 font26">名片码</view>
				</view>
			</view>
		</view>
		<view class="infoList">
			<view class="btn-group fboxRow Ycenter" v-if="detail.cardId != userInfo.memberId">
				<!--  #ifdef  H5 -->
				<view class="btn font30 flex1 fboxRow Ycenter Xcenter border-radius12 btn-share" @tap="shareCard">分享名片
				</view>
				<!--  #endif -->
				<!--  #ifdef  MP -->
				<button class="btn font30 flex1 fboxRow Ycenter Xcenter border-radius12 btn-share" open-type="share"
					hover-class="none">分享名片</button>
				<!--  #endif -->
				<view class="btn btn-linear flex1 font30 color-141720 fboxRow Ycenter Xcenter bg-linear border-radius12"
					@tap="goChange('2')" v-if="detail.cardId != userInfo.memberId && detail.isFriend">
					发消息
				</view>
				<view v-else-if="detail.cardId && detail.cardId != userInfo.memberId"
					class="btn btn-linear flex1 font30 color-141720 fboxRow Ycenter Xcenter bg-linear border-radius12"
					@tap="goChange(1)">
					申请交换名片
				</view>
			</view>
			<view class="btn-group fboxRow Ycenter" v-else>
				<!--  #ifdef  H5 -->
				<view class="btn font30 flex1 fboxRow Ycenter Xcenter border-radius12 btn-share" @tap="shareCard"
					hover-class="none">递名片</view>
				<!--  #endif -->
				<!--  #ifdef  MP -->
				<button class="btn font30 flex1 fboxRow Ycenter Xcenter border-radius12 btn-share" open-type="share"
					hover-class="none">递名片</button>
				<!--  #endif -->
				<!-- <view class="btn font30 flex1 fboxRow Ycenter Xcenter border-radius12 btn-share" @tap="shareCard">递名片</view> -->
				<view
					class="btn font30 btn-linear flex1 font30 color-141720 fboxRow Ycenter Xcenter bg-linear border-radius12"
					@tap="goPage('qrcode')">名片码</view>
			</view>
			<view class="btn-scroll">
				<view class="scroll-wrap">
					<scroll-view scroll-x="true" @touchmove.stop>
						<view class="fboxRow Ycenter">
							<view class="btn fboxCol border-radius12"
								v-if="detail.mobile && detail.mobile != '不可见(需双方交换名片)'">
								<view class="tit fboxRow Ycenter font26">
									<view class="flex1" @tap="goPage('phone')"><text class="bwfont bw-dianhua4"></text>拨打电话</view>
									<text class="bwfont bw-youxiang" @tap="goPage('copyPhone')"></text>
								</view>
								<view class="con font26" @tap="goPage('phone')">{{ detail.mobile || '' }}</view>
							</view>
							<view class="btn fboxCol border-radius12"
								v-if="detail.email && detail.email != '不可见(需双方交换名片)'">
								<view class="tit fboxRow Ycenter font26">
									<view class="flex1"><text class="bwfont bw-lujing4"></text>复制邮箱</view>
									<text class="bwfont bw-youxiang" @tap="goPage('email')"></text>
								</view>
								<view class="con font26">{{ detail.email || '' }}</view>
							</view>
							<view class="btn fboxCol border-radius12"
								v-if="detail.addressInfo && detail.addressInfo != '不可见(需双方交换名片)'" @tap="goPage('map')">
								<view class="tit fboxRow Ycenter font26">
									<text class="bwfont bw-dingwei"></text>
									地址
								</view>
								<view class="con font26">{{ detail.addressInfo || '' }}</view>
							</view>
							<view class="btn fboxCol border-radius12" @tap="goPage('mydd')">
								<view class="tit fboxRow Ycenter font26">
									<text class="bwfont bw-zhuye"></text>
									{{ detail.cardId != userInfo.memberId ? 'TA的主页' : '我的主页' }}
								</view>
								<view class="con font26">点击查看主页</view>
							</view>
							<view class="btn fboxCol border-radius12" v-if="detail.showResumeFlag" @tap="goVita">
								<view class="tit fboxRow Ycenter font26">
									<text class="bwfont bw-jianli"></text>
									{{ detail.cardId != userInfo.memberId ? 'TA的简历' : '我的简历' }}
								</view>
								<view class="con font26">点击查看简历</view>
							</view>
							<view class="btn fboxCol border-radius12" @tap="$pageTo('/about/guidePage')">
								<view class="tit fboxRow Ycenter font26">
									<text class="bwfont bw-renmai"></text>
									{{ detail.cardId != userInfo.memberId ? 'TA的人脉' : '我的人脉' }}
								</view>
								<view class="con font26">点击查看人脉</view>
							</view>
							<view class="btn fboxCol border-radius12" @tap="follow()"
								v-if="detail.cardId != userInfo.memberId">
								<view class="tit fboxRow Ycenter font26">
									<text class="bwfont"
										:class="_detail.follow ? 'bw-yiguanzhu' : 'bw-weiguanzhu'"></text>
									{{ _detail.follow ? '已关注' : '关注TA' }}
								</view>
								<view class="con font26">{{ _detail.follow ? '点击取消关注' : '点击这里关注' }}</view>
							</view>
							<view class="btn fboxCol border-radius12" v-if="detail.cardId != userInfo.memberId"
								@tap="$pageTo('/about/guidePage')">
								<view class="tit fboxRow Ycenter font26">
									<text class="bwfont bw-lujing3"></text>
									更多名片
								</view>
								<view class="con font26">点击查看更多</view>
							</view>
							<!-- 
						<view class="btn fboxRow Ycenter Xcenter border-radius12" @tap="follow()"
							v-if="detail.cardId != userInfo.memberId">
							<image class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/card/img13.png"
								mode="aspectFit"></image>
							{{ _detail.follow ? '已关注' : '关注TA' }}
						</view>
						<view class="btn fboxRow Ycenter Xcenter border-radius12" v-if="detail.showResumeFlag"
							@tap="goVita">
							<image class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/card/img14.png"
								mode="aspectFit"></image>
							{{ detail.cardId != userInfo.memberId ? 'TA的简历' : '查看的简历' }}
						</view>
						<view class="btn fboxRow Ycenter Xcenter border-radius12"
							v-if="detail.cardId != userInfo.memberId" @tap="$pageTo('/about/guidePage')">
							<image class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/card/img15.png"
								mode="aspectFit"></image>
							查看TA的其他名片
						</view> -->
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="detail-enterprise" v-if="isCompony">
			<view class="card">
				<view class="hd fboxRow Ycenter font38 color-E8CDA7">
					<view class="flex1">我的企业</view>
					<!-- <view class="color-6B707C font26 lh38">更多</view> -->
				</view>
				<view class="bd mt32 font28">
					<view class="enterprise-item">
						<view class="fboxRow Ycenter" @click="$pageTo('/businessCard?isScan=1&id='+company.companyId)">
							<image class="logo" :src="company && company.companyLogo" mode="aspectFill"></image>
							<view class="fboxCol flex1">
								<view class="fboxRow Ycenter font28 color-main">
									<view class="fboxRow Ycenter flex1">
										<view class="name font30 lh44 font-ell1">{{company && company.companyName}}
										</view>
										<text v-if="company && company.authStatus == 1"
											class="ml12 bwfont bw-qiye color-linear"></text>
									</view>
									<view class="btn fboxRow Ycenter Xcenter font22">企业官网</view>
								</view>
								<view class="font26 lh40 font-w300">{{company && company.industryName || '无'}}</view>
								<view class="font26 lh40 font-ell1 font-w300">
									{{company && company.companyAddress || '无'}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail-introdution">
			<view class="card introdution" v-if="detail.canProvide || detail.need">
				<view class="hd fboxRow Ycenter font38 fwb color-E8CDA7">
					<view class="flex1">个人信息发布</view>
					<!-- <view class="color-6B707C font26 lh38">更多</view> -->
				</view>
				<view class="bd mt24 font28">
					<view class="intr-wrap" v-if="detail.canProvide || detail.need">
						<view class="item" v-if="detail.canProvide">
							<view class="tit font26 lh38">我提供的：</view>
							<view class="con mt16 font26 lh38 color-ACB4C7">{{detail.canProvide}}</view>
						</view>
						<view class="item" style="margin-top: 44rpx;" v-if="detail.need">
							<view class="tit font26 lh38">我需要的：</view>
							<view class="con mt16 font26 lh38 color-ACB4C7">{{detail.need}}</view>
						</view>
					</view>
					<view class="font26 lh38 color-ACB4C7" v-else>
						暂无
					</view>
				</view>
			</view>
			<!-- 签名 -->
			<view class="card fboxRow Ycenter Xcenter sign-box" v-if="detail.memberSynopsis">
				<view class="sign fboxRow Ycenter Xcenter font32 lh44"
					:style="{'background-image': 'url('+disposition.signature+')'}">{{ detail.memberSynopsis }}</view>
			</view>
			<view class="card introdution" v-if="detail.memberProfile || detail.myHometown || detail.industryName || detail.expectMeetName || detail.college || detail.industry || detail.areaCityName || _detail.listPortray&&_detail.listPortray.length">
				<view class="hd fboxRow Ycenter font38 fwb color-E8CDA7">
					<view class="flex1">我的简介</view>
					<!-- <view class="color-6B707C font26 lh38">更多</view> -->
				</view>
				<view class="bd font28">
					<!-- <template v-if="detail.memberProfile || detail.myHometown || detail.college || detail.industry || detail.areaCityName"> -->
						<view class="intr lh38 color-ACB4C7 font26" v-if="detail.memberProfile">{{detail.memberProfile}}</view>
						<view class="fboxRow Ycenter lh38" v-if="detail.myHometown">
							<view class="tit">我的家乡：</view>
							<view class="con">{{detail.myHometown}}</view>
						</view>
						<view class="fboxRow mt24 Ycenter lh38" v-if="detail.areaCityName">
							<view class="tit">所在城市：</view>
							<view class="con">{{detail.areaCityName}}</view>
						</view>
						<view class="fboxRow mt24 Ycenter lh38" v-if="detail.college">
							<view class="tit">毕业院校：</view>
							<view class="con">{{detail.college}}</view>
						</view>
						<view class="fboxRow mt24 Ycenter lh38" v-if="detail.industry || detail.industryName">
							<view class="tit">所属行业：</view>
							<view class="con">{{detail.industry || detail.industryName}}</view>
						</view>
						<view class="fboxRow mt24 Ycenter lh38" v-if="detail.expectMeetName">
							<view class="tit">期望结识：</view>
							<view class="con">{{detail.expectMeetName}}</view>
						</view>
						<view class="tags fboxWrap mt32">
							<view class="tag fboxRow Ycenter Xcenter font26 font-ell1"
								v-for="(item, index) in _detail.listPortray" :class="['color-'+((index%5).toFixed(0))]"
								:key="index" @click="likeTap(item, index)">
								<text class="bwfont bw-Vector3"></text> {{item.portrayName}} {{item.likeNum}}
							</view>
						</view>
					<!-- </template>
					<view class="mt24 font26 lh38 color-ACB4C7" v-else>
						暂无
					</view> -->
				</view>
			</view>
		</view>

		<view class="card card-pic" v-if="detail.albumPicture.length">
			<view class="hd fboxRow Ycenter font38 fwb color-E8CDA7">
				<view class="flex1">我的照片</view>
			</view>
			<view class="bd fboxRow mt32" :class="{'pic-1': detail.albumPicture.length == 1,
			'pic-2': detail.albumPicture.length == 2,
			'pic-3': detail.albumPicture.length >= 3,}">
				<view class="flex1 pic-1" v-if="detail.albumPicture.length >= 1">
					<image class="pic img_bg" :src="detail.albumPicture[0]" mode="aspectFill"></image>
				</view>
				<view class="fboxCol flex1 ml14" v-if="detail.albumPicture.length >= 2"
					:class="{'pic-1': detail.albumPicture.length == 2, 'pic-2': detail.albumPicture.length >= 3,}">
					<image class="pic img_bg" :src="detail.albumPicture[1]" mode="aspectFill"></image>
					<image class="pic mt16 img_bg" v-if="detail.albumPicture.length >=3" :src="detail.albumPicture[2]"
						mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<view class="card card-video" v-if="detail.shortVideo">
			<view class="hd fboxRow Ycenter font38 color-E8CDA7">
				<view class="flex1">我的视频</view>
				<!-- <view class="color-6B707C font26 lh38">更多</view> -->
			</view>
			<view class="bd mt32">
				<view class="video-box fboxWrap Ycenter Xcenter">
					<video class="video-inner" :src="detail.shortVideo" :show-fullscreen-btn="false" object-fit="cover"
						style="object-fit: cover"></video>
					<view class="video-layer" @tap="isVideo = true"></view>
				</view>
			</view>
			<u-overlay :show="isVideo" @click="isVideo = false">
				<view class="video-wrap" v-if="isVideo" @tap.stop>
					<view class="close" @click="isVideo = false"><u-icon size="42rpx" name="close"
							color="#fff"></u-icon></view>
					<video class="video-inner" :src="detail.shortVideo" autoplay></video>
				</view>
			</u-overlay>
		</view>

	</view>
</template>

<script>
	import {
		unlimitedQRCode
	} from '@/api/card.js'
	import {
		portrayLike
	} from '@/api/card.js';
	export default {
		components: {},
		props: {
			detail: {
				type: Object,
				defaul: () => {
					return {}
				}
			},
			company: {
				type: Object,
				defaul: () => {
					return {}
				}
			},
			isMine: {
				type: Boolean,
				default: false
			},
			isCompony: {
				type: Boolean,
				default: false
			},
			pattern: {
				type: [String, Number],
				default: '0'
			},
			disposition: { // 配置签名背景图
				type: Object,
				defaul: () => {
					return {}
				}
			},
		},
		watch: {
			'detail.cardId': {
				handler() {
					this.getCode()
				},
				deep: true,
				immediate: true
			}
		},
		computed: {
			_detail: {
				get() {
					return this.detail;
				},
				set(val) {
					this.$emit('update:detail', val);
				}
			}
		},
		data() {
			return {
				WeChatCodeUrl: '',
				userInfo: '',
				isVideo: false,
	
			}
		},
		mounted() {
			const bw_user_temp = getApp().getBWData(['bw_user_temp']).bw_user_temp;
			if (bw_user_temp && bw_user_temp.memberId) {
				this.userInfo = bw_user_temp;
			}
		},
		methods: {
			picPreview(urls, index) {
				uni.previewImage({
					urls: urls,
					current: index
				});
			},
			getCode() {
				// /pages/card/cardDetail?id=
				const pattern = this.pattern ? '*pattern/' + this.pattern : ''
				// #ifdef MP-WEIXIN
				unlimitedQRCode({
					// param: 'pattern='+this.pattern,
					param: 'p/0*id/' + this.detail.cardId,
					// param: 'p/0*id/' + this.detail.cardId + pattern,
					// param: this.detail.cardId,
					memberId: this.detail.cardId
				}).then(res => {
					this.WeChatCodeUrl = res.data
				})
				// #endif
			},
			goPage(type) {
				if (type == 'mydd') {
					this.$pageTo('/mydd?memberId=' + this.detail.cardId);
				} else if (type == 'phone') {
					uni.makePhoneCall({
						phoneNumber: this.detail.mobile
					});
				} else if (type == 'copyPhone') {
					uni.setClipboardData({
						data: this.detail.mobile,
						success: function() {
							console.log('success');
						}
					});
				} else if (type == 'email') {
					uni.setClipboardData({
						data: this.detail.email,
						success: function() {
							console.log('success');
						}
					});
				} else if (type == 'qrcode') {
					this.$pageTo('/card/qrcode?memberId=' + this.detail.cardId);
				} else if (type == 'map') {
					uni.authorize({
						scope: 'scope.userLocation',
						success: () => {
							uni.openLocation({
								latitude: this.detail.latitude,
								longitude: this.detail.longitude,
								success: function() {}
							});
						}
					});
				}
			},
			goChange(type) {
				// type 1 申请交换名片 2 发送消息
				// #ifdef H5
				this.$emit('open');
				// #endif
				// #ifdef MP
				this.$pageTo('/about/guidePage')
				// #endif
				// const { bw_params, bw_user_temp } = getApp().getBWData(['bw_params', 'bw_user_temp']);
				// if (bw_params && bw_params.access_token) {
				// 	// 是否提交过交换名片
				// 	if (this.detail.exchangeStep == 0) {
				// 		uni.showToast({
				// 			icon: 'none',
				// 			title: '等待对方验证通过'
				// 		});
				// 		return
				// 	}
				// 	this.$pageTo('/cardChange?id=' + this.detail.cardId);
				// } else {
				// 	this.$emit('login');
				// }
			},
			goVita() {
				const {
					bw_params,
					bw_user_temp
				} = getApp().getBWData(['bw_params', 'bw_user_temp']);
				if (bw_params && bw_params.access_token) {
					if (bw_user_temp.memberId == this.detail.cardId) {
						this.$pageTo('/recruit/user/detail?parentPage=card&pageType=0&id=' + this.detail.resumeId);
					} else if (this.detail.organisationId) {
						this.$pageTo('/recruit/user/detail?parentPage=card&pageType=2&id=' + this.detail.resumeId +
							'&companyId=' + this.detail.organisationId);
					} else {
						this.$pageTo('/recruit/user/detail?parentPage=card&pageType=1&id=' + this.detail.resumeId);
					}
				} else {
					this.$emit('login');
				}
			},
			follow() {
				const {
					bw_params
				} = getApp().getBWData(['bw_params']);
				if (bw_params && bw_params.access_token) {
					if (this._detail.follow) {
						attentionDel({
							memberIdList: [this.detail.cardId]
						}).then(res => {
							this._detail.follow = false;
							this.$emit('follow', false);
						});
					} else {
						attentionAdd({
							othersId: this.detail.cardId
						}).then(res => {
							this._detail.follow = true;
							this.$emit('follow', true);
						});
					}
				} else {
					this.$emit('login');
				}
			},
			shareCard() {
				// #ifdef H5
				this.$emit('card');
				// uni.setClipboardData({
				// 	data: window.location.href+'&pattern='+this.pattern,
				// 	showToast: false,
				// 	success: function() {
				// 		uni.showToast({
				// 			icon: 'none',
				// 			title: '分享地址已复制，去分享给朋友吧'
				// 		});
				// 		console.log('success');
				// 	}
				// });
				// #endif
				// #ifdef MP
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						console.log(res.provider);
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									console.log(JSON.stringify(loginRes));
								}
							});
						}
					}
				});
				// #endif
			},
			likeTap(item, index) {
				const {
					bw_params
				} = getApp().getBWData(['bw_params'])
				if (bw_params.access_token) {
					portrayLike({
						"memberId": this.detail.cardId,
						"optType": item.likeStatus ? 0 : 1,
						"portrayId": item.portrayId
					}).then(res => {
						if (res.data) {
							this._detail.listPortray[index].likeStatus = !item.likeStatus
							this._detail.listPortray[index].linkeNum++
						}
					})
				} else {
					this.$pageTo('/index/index?isToken=1')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.info-wrap {
		padding: 40rpx 40rpx 0;
		color: var(--contentFontDarkColor);
	}

	.info-wrap .name {
		line-height: 64rpx;
		font-size: 44rpx;
		font-weight: 500;
	}

	.info-wrap .name .bwfont {
		margin-left: 10rpx;
		background: linear-gradient(360deg, #C49875 6%, #EDB384 100%);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.info-wrap .job {
		margin-top: 4rpx;
	}

	.info-wrap .companyName {
		margin-top: 12rpx;
	}

	.info-wrap .icon-code {
		width: 96rpx;
		height: 96rpx
	}

	// #ifdef MP
	.info-wrap .icon-code {
		width: 80rpx;
		height: 80rpx;
		padding: 8rpx;
		border-radius: 50%;
		border: 1rpx solid var(--buttonOutlineOneColor);
		background-color: #fff;
	}

	// #endif

	.tag-auth {
		margin-left: 12rpx;
		padding: 0 12rpx;
		height: 36rpx;
		background: var(--backgroundDivisionColor);
		border-radius: 4rpx
	}

	.card .hd {
		padding: 0 40rpx;
		line-height: 56rpx;
		font-weight: 700;
	}

	.info-wrap {
		padding: 24rpx 40rpx;
	}

	.info-wrap .item {
		padding: 16rpx 0;
	}

	.info-wrap .left {
		margin-right: 8rpx;
	}

	.info-wrap .center {
		line-height: 40rpx;
	}

	.info-wrap .icon {
		margin: 3rpx 30rpx 0 0;
		width: 37rpx;
		height: 39rpx;
	}

	.info-wrap .btn {
		width: 64rpx;
		height: 36rpx;
		border-radius: 4rpx;
		opacity: 1;
	}

	.btn-group {
		padding: 48rpx 40rpx 0;
	}

	.btn-group .btn {
		height: 88rpx;
	}

	.btn-group .btn+.btn {
		margin-left: 22rpx;
	}

	.btn-share {
		border: 1px solid var(--senderViewColor);
		background: var(--pureButtonBackOneColor);
		color: var(--senderViewColor);
	}

	.btn-scroll {
		padding: 48rpx 40rpx 0;
	}

	.btn-scroll .btn {
		padding: 14rpx 18rpx;
		border: 1px solid var(--buttonOutlineTwoColor);
		white-space: nowrap;
		max-width: 344rpx;
	}
	.btn-scroll .btn .bw-youxiang{padding-left: 20rpx; color: #98979C;background: none !important;
		-webkit-text-fill-color: #98979C!important;}

	.btn .tit {
		height: 38rpx;
		white-space: nowrap;
	}

	.btn .con {
		height: 36rpx;
		line-height: 36rpx;
		margin-top: 4rpx;
		color: var(--contentFontLightColor);
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.btn-scroll .scroll-wrap .btn+.btn {
		margin-left: 12rpx;
	}

	.btn-scroll .bwfont {
		font-size: 28rpx;
		margin-right: 10rpx;
		background-image: linear-gradient(to top, #ad7b54, #d8a37a);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.btn-scroll .icon {
		margin-right: 4rpx;
		width: 26rpx;
		height: 26rpx;
		background-color: red;
	}

	.line {
		margin: 0 auto;
		width: 670rpx;
		height: 1rpx;
		background: var(--backgroundDivisionColor);
	}

	.detail-enterprise .card {
		padding:40rpx;
	}

	.detail-enterprise .card .hd { padding: 0; }

	.enterprise-item {
		// padding: 24rpx;
		width: 670rpx;
		border-radius: 12rpx;
		color:var(--contentFontDarkColor)
	}

	.enterprise-item .logo {
		margin-right: 16rpx;
		width: 108rpx;
		height: 108rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
	}

	.enterprise-item .icon {
		margin-left: 9rpx;
		width: 40rpx;
		height: 40rpx
	}

	.enterprise-item .name {
		max-width: 340rpx;
		color: var(--titleFontColor)
	}

	.enterprise-item .btn {
		width: 136rpx;
		height: 48rpx;
		border-radius: 8rpx;
		border: 1px solid var(--senderViewColor);background: var(--pureButtonBackOneColor);color: var(--senderViewColor)
	}
	.detail-introdution .card {
		padding: 24rpx 40rpx 40rpx;
	}

	.detail-introdution .card .hd {
		padding: 0;
	}

	.intr {
		padding: 22rpx 0 38rpx;
	}

	.tag {
		margin: 0 16rpx 16rpx 0;
		height: 48rpx;
		line-height: 48rpx;
		padding: 0 12rpx;
		border-radius: 8rpx;
		border: 1rpx solid #eee;
		overflow: hidden;
	}

	.tag .bwfont {
		font-size: 26rpx;
		margin-right: 8rpx
	}

	.con {
		color: var(--contentFontDarkColor);
	}

	.color-0 {
		color: #4C89DC;
		border-color: #4C89DC;
	}

	.color-1 {
		color: #E5A66F;
		border-color: #E5A66F;
	}

	.color-2 {
		color: #44AA72;
		border-color: #44AA72;
	}

	.color-3 {
		color: #D25941;
		border-color: #D25941;
	}

	.color-4 {
		color: #EB6449;
		border-color: #EB6449;
	}

	.color-5 {
		color: #7C89FF;
		border-color: #7C89FF;
	}

	.sign-box {
		padding: 0 0 24rpx;
		color: var(--contentBgImageTitleColor)
	}

	.sign-box .sign {
		width: 670rpx;
		height: 120rpx;
		background: no-repeat top center/cover;
		border-radius: 12rpx;
	}

	.card-pic {
		padding: 24rpx 40rpx 40rpx;
	}

	.card-pic .hd {
		padding: 0;
	}

	.card-pic .pic {
		width: 100%;
		border-radius: 12rpx;
		position: relative;
		z-index: 1;
	}

	.card-pic .pic-1 .pic {
		height: 436rpx;
	}

	.card-pic .pic-3 .pic-2 .pic {
		height: 210rpx;
	}

	.card-pic .ml14 {
		margin-left: 14rpx;
	}

	.card-video {
		padding: 24rpx 40rpx 56rpx;
	}

	.card-video .hd { padding: 0;}
	.card-video .bd {
		position: relative;
	}

	.video-layer {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
		width: 100%;
		height: 100%;
	}

	.video-box .video-inner {
		position: relative;
		z-index: 1;
		//width: 670rpx;
		width: 100%;
		height: 352rpx;
		background: rgba(26, 29, 37, 0.35);
		border-radius: 12rpx;
	}

	.video-box .video-inner .icon {
		width: 89rpx;
		height: 89rpx;
	}

	@media (min-width: 780px) {
		.video-box .video-inner {
			height: 704rpx;
		}
	}

	.video-wrap {
		width: 100%;
		height: calc(100vh);
	}

	.video-wrap .video-inner {
		position: relative;
		z-index: 2;
		width: calc(100vw);
		height: calc(100vh);
	}

	.video-wrap .close {
		position: fixed;
		top: 150rpx;
		right: 24rpx;
		z-index: 10;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%
	}


	[data-tradition='newYear'],.newYear {
		.sign-box .sign {
			color: #D05349
		}

		.btn-group .btn-share {
			border-color: #F54435;
			background-color: #FFEEED;
			color: #F44334;
		}

		.btn-group .btn-linear {
			background: linear-gradient(360deg, #E7473A 0%, #FC6759 98%);
		}

		.btn-scroll .bwfont {
			background: none;
			-webkit-text-fill-color: #F05704;
			color: #F05704;
		}

		.btn-scroll .btn {
			border-color: rgba(211, 54, 41, 0.70);
		}

	}

	[data-tradition='newYear2'],.newYear2 {
		.sign-box .sign {
			color: #A54C2A
		}

		.btn-group .btn-share {
			border-color: #ED7923;
			background-color: #FFF2E7;
			color: #E46921;
		}

		.btn-group .btn-linear {
			background: linear-gradient(360deg, #E57E46 0%, #E4AB5C 98%);
		}

		.btn-scroll .bwfont {
			background: none;
			-webkit-text-fill-color: #F05704;
			color: #F05704;
		}

		.btn-scroll .btn {
			border-color: rgba(237, 121, 35, 0.70);
		}
	}

	[data-tradition='golden'],.golden {
		.sign-box .sign {
			color: #322B24
		}

		.btn-group .btn-share {
			border-color: var(--senderViewColor);
			background-color: var(--pureButtonBackOneColor);
			color: var(--senderViewColor);
		}

		.btn-group .btn-linear {
			background: linear-gradient(180deg, var(--rampButtonBackStartColor) 0%, var(--rampButtonBackEndColor) 100%);
		}

		.btn-scroll .bwfont {
			background-image: linear-gradient(to top, #ad7b54, #d8a37a);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.btn-scroll .btn {
			border-color: var(--buttonOutlineTwoColor);
		}

	}

	[data-tradition='turquoise'],.turquoise {
		.sign-box .sign {
			color: #1B1916
		}

		.btn-group .btn-share {
			border-color: #0a6f88;
			background-color: #dbf4f9;
			color: #0a6f88;
		}

		.btn-group .btn-linear {
			background: linear-gradient(360deg, #045570 0%, #1290a7 100%);
		}

		.btn-scroll .bwfont {
			background-image: linear-gradient(to top, #045872, #0e8299);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.btn-scroll .btn {
			border-color: #0a6f88;
		}
	}

	[data-tradition='fuchsia'],.fuchsia {
		.sign-box .sign {
			color: #781579
		}

		.btn-group .btn-share {
			border-color: #bd2bc0;
			background-color: #fce2fc;
			color: #961a98;
		}

		.btn-group .btn-linear {
			background: linear-gradient(360deg, #840d86 0%, #cf33d1 100%);
		}

		.btn-scroll .bwfont {
			background-image: linear-gradient(to top, #770c78, #cf33d1);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.btn-scroll .btn {
			border-color: #bd2bc0;
		}
	}
</style>